<template>
    <div class="app-container">
        <vxe-tip title="类型 type:'checkbox', // checkbox、radio" status="success">
            默认select
        </vxe-tip>
        <vxe-tip title="绑定多个值到表单数据中 —— bounds" status="success">
            <pre>
    bounds:'myName',
    bounds:{
        myName:'name',
        myId:'id'
    }
</pre>
        </vxe-tip>
        <y-form ref="formRef" :options="formOptions" @submit="submit">
            <template #static>
                <vxe-tip title="静态" status="primary">
                    <pre>
    dataList: [
        { name: '上班', value: 1 },
        { name: '下班', value: 2 }
    ]
</pre>
                </vxe-tip>
            </template>
            <template #sync>
                <vxe-tip title="异步" status="primary">
                    <pre>
    initData: async () => await getDictItems('frame_user_type')
</pre>
                    <br>
                    返回类型为 [ name: string, value: any ]
                </vxe-tip>
            </template>
            <template #dict>
                <vxe-tip title="字典" status="primary">
                    <pre>
    dictCode:'frame_user_type'
</pre>
                </vxe-tip>
            </template>
        </y-form>
    </div>
</template>

<script>
import { getDictItems } from '@/utils/dict'
export default {
    data() {
        return {
            sele: undefined,
            formOptions: {
                items: [
                    {
                        slots: { default: 'static' }
                    },
                    {
                        children: [
                            {
                                span: 6,
                                field: 'sele-select',
                                title: '下拉框 - 静态',
                                itemRender: {
                                    name: 'ZSelect',
                                    props: {

                                        dataList: [
                                            { name: '上班', value: 1 },
                                            { name: '下班', value: 2 }
                                        ]
                                    }
                                },
                            },
                            {
                                span: 6,
                                field: 'sele-checkbox',
                                title: '多选框 - 静态',
                                itemRender: {
                                    name: 'ZSelect',
                                    props: {
                                        type: 'checkbox',
                                        dataList: [
                                            { name: '上班', value: 1 },
                                            { name: '下班', value: 2 }
                                        ]
                                    }
                                },
                            },
                            {
                                span: 6,
                                field: 'sele-radio',
                                title: '单选框 - 静态',
                                itemRender: {
                                    name: 'ZSelect',
                                    props: {
                                        type: 'radio',
                                        dataList: [
                                            { name: '上班', value: 1 },
                                            { name: '下班', value: 2 }
                                        ]
                                    }
                                },
                            },
                        ]
                    },
                    {
                        slots: { default: 'sync' }
                    },
                    {
                        children: [
                            {
                                span: 6,
                                field: 'sele-select-sync',
                                title: '下拉框 - 异步',
                                itemRender: {
                                    name: 'ZSelect',
                                    props: {
                                        initData: async () => await getDictItems('frame_user_type')
                                    }
                                },
                            },
                            {
                                span: 6,
                                field: 'sele-checkbox-sync',
                                title: '多选框 - 异步',
                                itemRender: {
                                    name: 'ZSelect',
                                    props: {
                                        type: 'checkbox',
                                        // initData: async () => await getTableInfo()
                                        initData: async () => [
                                            { name: '上班', value: 1 },
                                            { name: '下班', value: 2 }
                                        ]
                                    }
                                },
                            },
                            {
                                span: 6,
                                field: 'sele-radio-sync',
                                title: '单选框 - 异步',
                                itemRender: {
                                    name: 'ZSelect',
                                    props: {
                                        type: 'radio',
                                        initData: async () => [
                                            { name: '上班', value: 1 },
                                            { name: '下班', value: 2 }
                                        ]
                                    },

                                },
                            },
                        ]
                    },
                    {
                        slots: { default: 'dict' }
                    },
                    {
                        children: [
                            {
                                field: 'sele-select-dict',
                                title: '下拉框 - 字典',
                                itemRender: {
                                    name: 'ZSelect',
                                    props: {
                                        type: 'checkbox',
                                        dictCode: 'frame_user_type',
                                        bounds: {
                                            myName: 'name',
                                            myId: 'id'
                                        }
                                    },
                                    events: {
                                        change({ data, params: [a, b] }) {
                                            console.log({ data, a, b })
                                        },
                                    }
                                },
                            },
                        ]
                    },
                    {
                        align: 'center', span: 24,
                        itemRender: {
                            name: 'VxeButtonGroup',
                            options: [
                                { content: '重置', type: 'reset' },
                                { content: '提交', type: 'submit', status: 'primary' }
                            ]
                        }
                    }
                ]
            }
        }
    },
    methods: {
        submit(e) {
            console.log(e)
        }
    },
}
</script>